<template>
  <div>
  <div class="multi-scr-main">
    <div class="header-main">
         <HeadMenu :activePage="activePanel"/>
    </div>

    <div class="con-main">
      <div class="side-left" v-if="leftSider.show" :style="leftSider.style">
             <GbDevicetree ref="gbDeviceTree"  @on-online-click="chnOnlineClick"/>
      </div>
      <div class="side-right">
          <div class="sr-header">
            <div style="width: 60px;margin-top: 7px;cursor: pointer;" @click="collapsibleClick" @mouseover="collapsibleEnter" @mouseleave="collapsibleLeave">
              <Icon v-if="leftSider.state === 'collapsible'" type="ios-arrow-dropleft-circle" size="32"
                    :color="leftSider.iconColor" :title="leftSider.title"   />
              <Icon v-if="leftSider.state === 'expland'" type="ios-arrow-dropright-circle" size="32"
                    :color="leftSider.iconColor" :title="leftSider.title"   />
            </div>
            <!-- 多钱选择按钮   -->
            <div style="width: 260px">
              <img class="btnBox" v-for="item in btnBoxs" :src="item.src"
                   :style="{width:'32px',marginTop:'10px',marginRight: '5px',marginLeft: '5px'}"
                   :title="item.title" @click="btnBoxClick(item.id)">
            </div>

            <img class="btnBox-fullscr"
                 :src="fullScr.image"
                 :style="{width:'32px',marginTop:'10px',marginRight: '5px',marginLeft: '5px',marginBottom: '5px'}"
                 :title="fullScr.title" @click="fullScrClick">


<!--          </Header>-->
          </div>
          <div class="sr-content">
<!--          <Content :style="{padding: '0px', background: '#051f70ff'}">-->
            <MultiScr1X1 v-if="selectBoxIndex==1" ref="multiScr1X1"> </MultiScr1X1>
            <MultiScr2X2 v-if="selectBoxIndex==2" ref="multiScr2X2"> </MultiScr2X2>
            <MultiScr3X3 v-if="selectBoxIndex==3" ref="multiScr3X3"> </MultiScr3X3>
            <MultiScr4X4 v-if="selectBoxIndex==4" ref="multiScr4X4"> </MultiScr4X4>
            <MultiScr5X5 v-if="selectBoxIndex==5" ref="multiScr5X5"> </MultiScr5X5>
            <MultiScr1J5 v-if="selectBoxIndex==6" ref="multiScr1J5"> </MultiScr1J5>
<!--          </Content>-->
          </div>
      </div>

    </div>

  </div>

<!--    </layout>-->
    <EnterAesPasswordDialog ref="enterAesPasswordDialog">></EnterAesPasswordDialog>
  </div>

<!--  </div>-->
</template>
<script>
import GbDevicetree from "_c/topnav/GbDeviceTree";
import Device from "@/api/Device";
import imag1X1 from '@/assets/multiscreenplay/1x1.png'
import imag2X2 from '@/assets/multiscreenplay/2x2.png'
import imag3X3 from '@/assets/multiscreenplay/3x3.png'
import imag4X4 from '@/assets/multiscreenplay/4x4.png'
import imag5X5 from '@/assets/multiscreenplay/5x5.png'
import imag1J5 from '@/assets/multiscreenplay/1j5.png'
import imagfullscr from '@/assets/multiscreenplay/fullscreen.png'
import MultiScr1X1 from "@/view/Home/Moudle/multiscreenplay/MultiScr1X1";
import MultiScr2X2 from "@/view/Home/Moudle/multiscreenplay/MultiScr2X2";
import MultiScr3X3 from "@/view/Home/Moudle/multiscreenplay/MultiScr3X3";
import MultiScr4X4 from "@/view/Home/Moudle/multiscreenplay/MultiScr4X4";
import MultiScr5X5 from "@/view/Home/Moudle/multiscreenplay/MultiScr5X5";
import MultiScr1J5 from "@/view/Home/Moudle/multiscreenplay/MultiScr1J5";
import MainTopMenuPanel from "@/view/Home/component/MainTopMenuPanel";
import HeadMenu from "@/view/Home/component/HeadMenu";
import {setFullScreen,exitFullScreen} from "../HomeCommFunction"
import expland from '@/assets/multiscreenplay/expland.png'
import highlineExpland from '@/assets/multiscreenplay/highline-expland.png'
import collapsible from '@/assets/multiscreenplay/collapsible.png'
import highlineCollapsible from '@/assets/multiscreenplay/highline-collapsible.png'
import config from "@/config";
import {apiResult} from "@/libs/util";
import EnterAesPasswordDialog from '@/view/Home/utils/EnterAesPasswordDialog';
export default {
  name:"MultiScreenPlay",
  components: {
    HeadMenu,
    GbDevicetree,MultiScr1X1,MultiScr2X2,MultiScr3X3,MultiScr4X4,MultiScr5X5,MultiScr1J5,
    EnterAesPasswordDialog,MainTopMenuPanel},
  computed:{


  },
  data(){
    return{
      showtest:true,
      activePanel: 0,
      collapsible:false,
      selectBoxIndex:6,//当前选择哪个页面
      btnBoxs:[
        {id:1,src:imag1X1,title:"1 X 1"},
        {id:2,src:imag2X2,title:"2 X 2"},
        {id:3,src:imag3X3,title:"3 X 3"},
        {id:4,src:imag4X4,title:"4 X 4"},
        {id:5,src:imag5X5,title:"5 X 5"},
        {id:6,src:imag1J5,title:"1 + 5"},
        //{id:7,src:imafullscr,title:"全屏"},
      ],
      api: new Device(),
      isCollapsed:false,
      showVideoDialog:false,
      //videoUrl:null,
      hasAudio:true,
      buttonProps: {
        type: 'primary',
        size: 'small',
      },
      leftSider:{
          state: "collapsible",
          src: collapsible,
          title: this.$t('map_tool_fold'),
          style: {width:'350px'},
          show: true,
          iconColor: "#3caf36"
      },
      fullScr:{
          image: imagfullscr,
          title: this.$t('map_tool_full_screen'),//"全屏",
          isFullScreen: false,
      },
    }
  },
  methods:{
    chnOnlineClick(node, data){
      this.$refs.enterAesPasswordDialog.confirm(data,data1=>{
      //在线设备
        const deviceId=data1.arrt.deviceCode;
        const channelId=data1.arrt.channelCode;
        //console.log("准备通知设备推流：" + deviceId + " : " + channelId);
        if (!(!!deviceId && !!channelId)){
          this.$Message.error("数据属性缺失，不能播放");
        }
        //console.log("*********>>>> livePlayer=%o",config.livePlayer());
        /** 通知设备推流 */
        if (config.livePlayer() === 'ZlmRtcClient'){
          if (this.selectBoxIndex === 1){
            this.$refs.multiScr1X1.openDialog(data1);
          }else if (this.selectBoxIndex === 2){
            this.$refs.multiScr2X2.openDialog(data1);
          }else if (this.selectBoxIndex === 3){
            this.$refs.multiScr3X3.openDialog(data1);
          }else if (this.selectBoxIndex === 4){
            this.$refs.multiScr4X4.openDialog(data1);
          }else if (this.selectBoxIndex === 5){
            this.$refs.multiScr5X5.openDialog(data1);
          }else if (this.selectBoxIndex === 6){
            this.$refs.multiScr1J5.openDialog(data1);
          }
        }else{
          console.log("准备通知设备推流：" + deviceId + " : " + channelId);
          this.api.playStart(deviceId,channelId).then(res=>{
            apiResult(res.data,false,result=>{
              const url=res.data.data.flv;
              if (this.selectBoxIndex === 1){
                this.$refs.multiScr1X1.play(url,deviceId,channelId);
              }else if (this.selectBoxIndex === 2){
                this.$refs.multiScr2X2.play(url,deviceId,channelId);
              }else if (this.selectBoxIndex === 3){
                this.$refs.multiScr3X3.play(url,deviceId,channelId);
              }else if (this.selectBoxIndex === 4){
                this.$refs.multiScr4X4.play(url,deviceId,channelId);
              }else if (this.selectBoxIndex === 5){
                this.$refs.multiScr5X5.play(url,deviceId,channelId);
              }else if (this.selectBoxIndex === 6){
                this.$refs.multiScr1J5.play(url,deviceId,channelId);
              }
            })

          })
        }
      })

    },
    /** 版面选择点击，切换页面 */
    btnBoxClick(number){
      this.selectBoxIndex = number;

    },
    //收起和展开左边栏
    collapsibleClick(){
      //console.log(">>>>>> MultiScreenPlay.collapsibleClick: state=%o",this.leftSider.state);
      if (this.leftSider.state == "collapsible"){
        this.leftSider.state = "expland";
        this.leftSider.src = expland
        this.leftSider.title = this.$t('map_tool_unfold') //展开
        //this.leftSider.style= {width:'0px'}
        this.leftSider.show =false
      }else{
        this.leftSider.state = "collapsible"
        this.leftSider.src = collapsible
        this.leftSider.title = this.$t('map_tool_fold')//"收起"
        //this.leftSider.style= {width:'400px'}
        this.leftSider.show =true
      }
    },
    collapsibleEnter(){
      this.leftSider.iconColor="#03d3ec";
    },
    collapsibleLeave(){
      this.leftSider.iconColor="#3caf36";
    },

    fullScrClick(){
      if (this.fullScr.isFullScreen){
        exitFullScreen();
        this.fullScr.isFullScreen = false;
        this.fullScr.title = this.$t('map_tool_full_screen')//"全屏";
      }else{
        if (this.leftSider.state == "collapsible"){
          this.collapsibleClick();
        }
        setFullScreen();
        this.fullScr.isFullScreen = true;
        this.fullScr.title = this.$t('map_tool_exit_full_screen')//"退出全屏";
      }
    },
    testClick(){
      let dd = document.getElementsByClassName();
      console.log("container: %o",dd);
    },
  },
  mounted() {
    const that = this;
    that.activePanel = 2;
  },

}
</script>

<style lang="less">
  @import "./style/MultiScreenPlay-bright";
</style>

<style lang="less" scoped>
 div{
   height: 100%;
   //color: #3caf36;
   //background-color: #03d3ec;
 }
/** {
  margin: 0;
  padding: 0;
}
html,body {
  width: 100%;
  height: 100%;
}

.ivu-layout{
  background: #001529;
  //background: #515a6e;
}
.ivu-layout-header {
  background: #001529;
  padding: 0 !important;
}

.layout{
  border: 1px solid #d7dde4;
  background: #001529;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  width:100%;
  height:100%;
}
.ivu-layout-sider {
  background: #001529;
  //background: rgba(81, 90, 110, 1);
}

.ivu-layout-content{
  overflow: auto !important;
}

.demo-tree-render .ivu-tree-title{
  width: 100%;
}*/
</style>
